<template>
	<view class="container">
		<fu-navbar title="创建维保工单" bgColor="#0f68f0" color="#fff" isBackText>
			<view slot="right">
				<image src="../../../static/images/scan.png" class="scan" @click="scanClick"></image>
			</view>
		</fu-navbar>
		<view class="tab-box">
			<view class="tab" :class="{'tab-active': current == 0}" @click="tabChange(0)">基本信息</view>
			<view class="tab" :class="{'tab-active': current == 1}" @click="tabChange(1)">备件</view>
			<view class="tab" :class="{'tab-active': current == 2}" @click="tabChange(2)">工作项</view>
		</view>
		<view style="height: 44rpx;background-color: #f2f2f2;"></view>
		<view class="box" v-if="current == 0">
			<view class="flex align-center padding-tb-24 border-b">
				<image src="../../../static/images/icon31.png" mode="widthFix" class="t-icon"></image>
				<text class="title">维修基本信息</text>
			</view>
			<view class="item flex align-center justify-between border-b padding-tb-24">
				<view class="label">维保日期</view>
				<view class="flex align-center" @click="toggleTab('date')">
					<view class="" v-if="form.upkeepStartTime">{{form.upkeepStartTime}}</view>
					<view class="color-c" v-else>选择日期</view>
					<image src="../../../static/images/arrow-r.png" class="arrow-r" mode="widthFix"></image>
				</view>
			</view>
			<view class="item flex align-center justify-between border-b padding-tb-24">
				<view class="label">设备编码</view>
				<view class="flex align-center" @click="navTo('/pages/service/select-device/index?type=weibao')">
					<view class="color-c" v-if="!form.emCode">选择设备</view>
					<view class="" v-else>{{form.emCode}}</view>
					<image src="../../../static/images/arrow-r.png" class="arrow-r" mode="widthFix"></image>
				</view>
			</view>
			<view class="item flex align-center justify-between border-b padding-tb-24">
				<view class="label">设备名称</view>
				<view class="flex align-center">
					<input placeholder="请输入" placeholder-class="pla-ipt" class="ipt" v-model="form.emName" disabled />
				</view>
			</view>
			<view class="item flex align-center justify-between border-b padding-tb-24">
				<view class="label">设备区域</view>
				<view class="flex align-center">
					<text @click="toggleTab('linkage')" v-if="areaValue">{{areaValue}}</text>
					<text @click="toggleTab('linkage')" v-else class="color-c">请选择</text>
					<image src="../../../static/images/arrow-r.png" class="arrow-r" mode="widthFix"></image>
				</view>
			</view>
			<view class="item flex align-center justify-between border-b padding-tb-24">
				<view class="label">位置</view>
				<view class="flex align-center">
					<input placeholder="请输入" placeholder-class="pla-ipt" v-model="form.emLocation" class="ipt" />
				</view>
			</view>
		</view>
		
		<!-- 备件 -->
		<view class="box" v-if="current == 1">
			<view class="border-b flex align-center justify-between padding-tb-24">
				<view class="flex align-center">
					<image src="../../../static/images/icon32.png" mode="widthFix" class="add-icon margin-r-12"></image>
					<view class="title">备件列表</view>
				</view>
				<view class="flex align-center" @click="navTo('/pages/maintenance/select-part/index')">
					<image class="add-r-icon margin-r-12" src="../../../static/images/add.png" mode="aspectFill"></image>
					<text class="r-txt">选择备件</text>
				</view>
			</view>
			<del-slide-left v-for="(item, index) in partList" :key="index" :item="item"  :data_transit="{index:index,item:item}" @delItem="cancel(index, 'part')">
				<view class="flex align-center justify-between padding-tb-12">
					<view class="over-hidden">
						<view class="fs-28 text-ellipsis">{{item.name}}</view>
						<view class="fs-26 margin-t-18" style="color: #dcdcdc;">{{item.code}}</view>
					</view>
					<view class="flex-shrink flex align-center">
						<view class="flex align-center">
							<image src="../../../static/images/jian2.png" class="jian" mode="aspectFill" @click="calcValue(index, 'jian')"></image>
							<view class="margin-lr-24 fs-28">{{item.num}}</view>
							<image src="../../../static/images/jia2.png" class="jian" mode="aspectFill" @click="calcValue(index, 'jia')"></image>
						</view>
						<!-- <view>
							<image src="../../../static/images/close2.png" style="width: 40rpx;height: 40rpx;margin-left: 32rpx;" @click="cancel(index, 'part')"></image>
						</view> -->
					</view>
				</view>
			</del-slide-left>
			<view class="no-data flex justify-center" v-if="partList.length == 0">
				<image src="../../../static/empty/no-data.png" class="img" mode="widthFix"></image>
			</view>
		</view>
		<view class="box" v-if="current == 2">
			<view class="border-b flex align-center justify-between padding-tb-24">
				<view class="flex align-center">
					<image src="../../../static/images/icon33.png" mode="widthFix" class="work-icon margin-r-12"></image>
					<view class="title">设置维保工作项</view>
				</view>
				<view class="flex align-center" @click="navTo('/pages/inspection/works/index?planType=1')">
					<image class="add-r-icon margin-r-12" src="../../../static/images/add.png" mode="aspectFill"></image>
					<text class="r-txt">新增工作项</text>
				</view>
			</view>
			<del-slide-left v-for="(item, index) in taskList" :key="index" :item="item"  :data_transit="{index:index,item:item}" @delItem="cancel(index, 'task')">
				<view class="flex align-center justify-between padding-tb-12 border-b-c9">
					<view class="over-hidden">
						<view class="fs-28 text-ellipsis">{{item.taskName}}</view>
						<view class="fs-26 margin-t-18" style="color: #dcdcdc;">{{item.taskDesc}}</view>
					</view>
					<view class="flex-shrink flex align-center">
						<switch :checked="false" color="#04d919" disabled></switch>
						<!-- <image src="../../../static/images/close2.png" style="width: 40rpx;height: 40rpx;margin-left: 32rpx;" @click="cancel(index, 'task')"></image> -->
					</view>
				</view>
			</del-slide-left>
			<view class="no-data flex justify-center" v-if="taskList.length == 0">
				<image src="../../../static/empty/no-data.png" class="img" mode="widthFix"></image>
			</view>
		</view>
		<view class="bottom-wrap">
			<view class="bottom">
				<view class="btn" @click="submit">确认</view>
			</view>
		</view>
		
		<w-picker mode="linkage" :options="areaList" themeColor="#30a3e0" :defaultProps="defaultProps" default-type="name" @confirm="onConfirm($event, 'linkage')" ref="linkage"></w-picker>
		<!-- 选择日期 -->
		<w-picker mode="date" fields="day" :value="dateValue" themeColor="#30a3e0"  @confirm="onConfirm($event, 'date')" ref="date"></w-picker>
	</view>
</template>

<script>
import fuNavbar from '@/components/fu-navbar/fu-navbar.vue';
import DelSlideLeft from '@/components/delSlideLeft/delSlideLeft.vue';
export default {
	components: {
		fuNavbar,
		DelSlideLeft
	},
	data() {
		return {
			current: 0,
			dateValue: '',
			// dateValue: `${new Date().getFullYear()}-${new Date().getMonth() + 1}-${new Date().getDate()}`,
			// endYear: new Date().getFullYear() + 1,
			emName: '',
			areaList: [],
			defaultProps: {
				value: 'id',
				label: 'name',
				children: 'children'
			},
			workProps: {
				label: 'src'
			},
			areaValue: '',
			form: {
				emId: 0,
				emName: '',
				emCode: '',
				emSpecification: '',
				emLocation: '',
				emArea: '',
				emBlock: '',
				taskList: [],
				partList: [],
				upkeepStartTime: ''
			},
			partList: [],
			workIndex: 0,
			taskList: []
		}
	},
	onLoad() {
		let that = this
		this.getArea();
		uni.$on('getPart', arr => {
			console.log(arr, 'part')
			arr.forEach(item => {
				item.num = 1
				that.partList.push(item)
			})
		})
		uni.$on('getDevice', data => {
			console.log(data, 'device')
			this.form.emId = data.id
			this.form.emName = data.emName
			this.form.emCode = data.emCode
			this.areaValue = data.emArea + data.emBlock
			this.form.emLocation = data.emLocation
		})
		uni.$on('getWorks', arr => {
			console.log(arr, 'works')
			arr.forEach(res => {
				let obj = {
					taskId: res.id,
					taskName: res.taskName,
					taskDesc: res.taskDesc,
					img: ''
				}
				this.taskList.push(obj)
			})
		})
	},
	onUnload() {
		uni.$off('getPart')
		uni.$off('getDevice')
	},
	methods: {
		tabChange(e) {
			this.current = e
		},
		toggleTab(ref) {
		  this.$refs[ref].show();
		},
		onConfirm(e, type) {
			console.log(e)
			if (type == 'date') {
				this.date = e.value
				this.form.upkeepStartTime = e.value
			} else if (type == 'linkage') {
				this.form.emArea = e.value[0]
				this.form.emBlock = e.value[1]
				this.areaValue = e.result
			}
		},
		navTo(path) {
			uni.navigateTo({
				url: path
			})
		},
		scanClick() {
			uni.scanCode({
				success: res => {
					console.log(res, 'scan')
					if (res.result.startsWith('EAM_EM')) {
						let id = res.result.split('_')[2]
						this.getEquipInfo(id)
					}
				}
			})
		},
		getEquipInfo(id) {
			this.$api.post(global.apiUrls.selectEquipmentInfo, {
				id: id
			}).then(data => {
				if (data.data.code == 9100) {
					let info = data.data.info
					console.log(info, 'info')
					this.form.emId = info.id
					this.form.emCode = info.emCode
					this.form.emName = info.emName
					this.form.emSpecification = info.emSpecification
					this.form.emArea = info.emAreaId
					this.form.emBlock = info.emBlockId
					this.form.emLocation = info.emLocation
					this.areaValue = `${info.emArea} ${info.emBlock}`
				} else {
					uni.showToast({
						title: data.data.msg,
						icon: 'none'
					})
				}
			})
		},
		// 获取设备位置
		getArea() {
			this.$api.post(global.apiUrls.selectEquipmentLocationLink).then(res => {
				if (res.data.code == 9100) {
					this.areaList = res.data.info
				}
			})
		},
		cancel(i, type) {
			if (type == 'part') {
				this.partList.splice(i, 1)
			} else {
				this.taskList.splice(i, 1)
			}
		},
		calcValue(i, type) {
			if (type == 'jian') {
				if (this.partList[i].num <= 1) return
				this.partList[i].num--
			} else {
				this.partList[i].num++
			}
			this.$forceUpdate()
		},
		submit() {
			if (!this.form.upkeepStartTime) {
				uni.showToast({
					title: '请选择维保日期',
					icon: 'none'
				})
				return
			}
			if (!this.form.emCode) {
				uni.showToast({
					title: '请选择设备',
					icon: 'none'
				})
				return
			}
			if (!this.form.emId && !this.form.emArea && !this.form.emBlock) {
				uni.showToast({
					title: '请选择设备区域',
					icon: 'none'
				})
				return
			}
			if (!this.form.emLocation) {
				uni.showToast({
					title: '请输入设备位置',
					icon: 'none'
				})
				return
			}
			// if (this.form.partList.length == 0) {
			// 	uni.showToast({
			// 		title: '请选择备件',
			// 		icon: 'none'
			// 	})
			// 	return
			// }
			if (this.taskList.length == 0) {
				uni.showToast({
					title: '请设置维保工作项',
					icon: 'none'
				})
				return
			}
			this.form.taskList = JSON.stringify(this.taskList)
			let arr = []
			this.partList.forEach(item => {
				let obj = {
					partId: item.id,
					partNum: item.num
				}
				arr.push(obj)
			})
			this.form.partList = JSON.stringify(arr)
			this.$api.post(global.apiUrls.insertUpkeep, this.form).then(res => {
				if (res.data.code == 9100) {
					console.log(this.form, 12112)
					uni.showToast({
						title: '操作成功',
						icon: 'none'
					})
					setTimeout(() => {
						uni.navigateBack()
					}, 800)
				} else {
					uni.showToast({
						title:res.data.msg,
						icon: 'none'
					})
				}
			})
		}
	}
}
</script>

<style lang="scss" scoped>
.scan {
	width: 50rpx;
	height: 50rpx;
}
.tab-box {
	background-color: #fff;
	display: flex;
	align-items: center;
	height: 100rpx;
	position: sticky;
	z-index: 99;
	.tab {
		flex: 1;
		text-align: center;
		line-height: 100rpx;
		color: #7f7f7f;
		position: relative;
	}
	.tab-active {
		color: #333;
		&::after {
			content: '';
			position: absolute;
			width: 90rpx;
			height: 6rpx;
			background-color: #555;
			border-radius: 2rpx;
			bottom: 0;
			left: 0;
			right: 0;
			margin: 0 auto;
		}
	}
}
.box {
	background-color: #fff;
	padding: 0 24rpx;
	.title {
		font-size: 34rpx;
		font-weight: bold;
	}
	.t-icon {
		width: 44rpx;
		margin-right: 24rpx;
	}
	.item {
		font-size: 28rpx;
		.ipt {
			text-align: right;
			font-size: 28rpx;
		}
		.pla-ipt {
			color: #ccc;
		}
		.arrow-r {
			width: 32rpx;
		}
	}
	.add-icon {
		width: 64rpx;
	}
	.work-icon {
		width: 54rpx;
	}
	.add-r-icon {
		width: 42rpx;
		height: 42rpx;
	}
	.r-txt {
		color: #1296db;
		font-size: 28rpx;
	}
	.no-data {
		.img {
			width: 160rpx;
			margin-top: 32rpx;
		}
	}
}
.select-icon {
	width: 60rpx;
	height: 60rpx;
}
.arrow-r {
	width: 32rpx;
	height: 32rpx;
	margin-left: 8rpx;
}

.bottom-wrap {
	height: 150rpx;
	.bottom {
		background-color: #fff;
		padding: 24rpx 60rpx;
		position: fixed;
		bottom: 0;
		width: 100%;
		box-sizing: border-box;
		z-index: 9;
		.btn {
			width: 100%;
			height: 88rpx;
			border-radius: 12rpx;
			text-align: center;
			line-height: 88rpx;
			color: #fff;
			background-color: #0f68f0;
			font-size: 34rpx;
			font-weight: bold;
		}
	}
}
.jian {
	width: 32rpx;
	height: 32rpx;
}

.border-b {
	border-bottom: 1rpx solid #c9c9c9;
}
</style>